/*
*配置模拟 表格
*ConfigSimulationTable.js
**/
import React,{Component}  from 'react'
import { connect } from 'react-redux';
import {Table,Icon,Input,InputNumber } from 'antd';
import Mock from 'mockjs';

const mapStateToProps = state => ({
  assetsRisk:state.configSimulation.assetsRisk,
  // assetsRatio:state.configSimulation.assetsRatio,
  CSassets:state.configSimulation.CSassets
});
const mapDispatchToProps = {
  changeState: query => ({
    type: 'configSconst/changeState',
    payload: query || {},
  }),
}
// 各类资产的预期风险收益特征：
@connect( mapStateToProps,null)
class AssetsIncomeTable extends Component {
  constructor(props) {
    super(props);
    this.columns = [
    {
      title: '类别',
      dataIndex: 'name',
      key: 'name',
    },{
      title: '年化收益率',
      dataIndex: 'annualYieldRate',
      key: 'annualYieldRate',
      render: (text, record) => (
        <EditableCell
          value={text}
          onChange={this.onCellChange(record.key, 'annualYieldRate')}
        />
      ),
    }, {
      title: '年化波动率',
      dataIndex: 'volatility',
      key: 'volatility',
      render: (text, record) => (
        <EditableCell
          value={text}
          onChange={this.onCellChange(record.key, 'volatility')}
        />
      ),
    }, {
      title: '风险收益比',
      dataIndex: 'riskAndReturnRatio',
      key: 'riskAndReturnRatio',
    },{
      title: '最大回撤',
      dataIndex: 'maxDrawdown',
      key: 'maxDrawdown',
    },{
      title: '数据起始日',
      dataIndex: 'startDate',
      key: 'startDate',
    },{
      title: '数据截止日',
      dataIndex: 'cutoffDate',
      key: 'cutoffDate',
    }];

    // const dataAssets = props.CSassets;
    // const dataLength = dataAssets.length;
    // console.log('AssetWeightTable>>',props,dataAssets)
    
    // this.state = {
    //   dataSource: dataAssets,
    //   count: dataLength,
    // };
  };
  onCellChange = (key, dataIndex) => {
    return (value) => {
      const dataSource = [...this.state.dataSource];
      const target = dataSource.find(item => item.key === key);
      if (target) {
        target[dataIndex] = value;
        this.setState({ dataSource });
      }
    };
  }
  render() {
    const {assetsRisk}=this.props;
    console.log('AssetsIncomeTable>>',this.props)
		return (
      <div >
        <Table
        	columns={this.columns}
        	dataSource={assetsRisk}
        	pagination={false}
        	size='small'
        	rowKey={record => record.name}
    		/>
      </div>
    );
  }
}
class EditableCell extends Component {
  state = {
    value: this.props.value,
    editable: false,
  }
  handleChange = (e) => {
    console.log('EditableCell>>',e.target.value)
    const value = e.target.value;
    this.setState({ value });
  }
  check = () => {
    this.setState({ editable: false });
    const {changeState} = this.props;
    if (this.props.onChange) {
      this.props.onChange(this.state.value);
    }
    console.log('EditableCell>state>',this.state)
    // changeState({
    //   'strategyName':this.state.value
    // })
  }
  edit = () => {
    this.setState({ editable: true });
  }
  render() {
    const { value, editable } = this.state;
    return (
      <div className="editable-cell">
        {
          editable ?
            <div className="editable-cell-input-wrapper">
              <Input
                value={value}
                onChange={this.handleChange}
                onPressEnter={this.check}
                style={{width : '80'}}
              />
              <Icon
                type="check"
                className="editable-cell-icon-check"
                onClick={this.check}
              />
            </div>
            :
            <div className="editable-cell-text-wrapper">
              {value || ' '}
              <Icon
                type="edit"
                className="editable-cell-icon"
                onClick={this.edit}
              />
            </div>
        }
      </div>
    );
  }
}

// //各类资产的相关系数：
// @connect( mapStateToProps,null)
class AssetsRatioTable extends Component{
  constructor(props) {
    super(props);
    console.log('AssetsRatioTable22',props)
    this.columns = [
    {
      title: '类别',
      dataIndex: 'name',
      key: 'name',
    },{
      title: '权益类',
      dataIndex: 'qyl',
      key: 'qyl',
      render: (text, record) => (
        <EdiCell
          value={text}
          onChange={this.onCellChange(record.key, 'qyl')}
        />
      ),
    },{
      title: '固收类',
      dataIndex: 'gsl',
      key: 'gsl',
      render: (text, record) => (
        <EdiCell
          value={text}
          onChange={this.onCellChange(record.key, 'gsl')}
        />
      ),
    },{
      title: '大宗商品',
      dataIndex: 'dzsp',
      key: 'dzsp',
      render: (text, record) => (
        <EdiCell
          value={text}
          onChange={this.onCellChange(record.key, 'dzsp')}
        />
      ),
    }];

    // this.myProps={
    //   columns: props.kArr.map((item,i)=>({
    //     title: item.assetName,
    //     dataIndex: item.assetName,
    //     key: item.assetName,
    //   })),
    //   // dataSource: props.assetsRatio,
    //   // rowKey:data.keyRow,
    // }
     const mockData = Mock.mock({
      "data":[
        {
          "name":'权益类',
          "qyl":22,
          "gsl":98,
          "dzsp":66,
        },
        {
          "name":'固收类',
          "qyl":12,
          "gsl":28,
          "dzsp":36,
        },
        {
          "name":'大宗商品',
          "qyl":41,
          "gsl":11,
          "dzsp":24,
        }
      ]        
    })
    const data = mockData.data
    this.state = {
      dataSource: data,
      count: data.length,
    };
  };
  onCellChange = (key, dataIndex) => {
    return (value) => {
      const dataSource = [...this.state.dataSource];
      const target = dataSource.find(item => item.key === key);
      if (target) {
        target[dataIndex] = value;
        this.setState({ dataSource });
      }
    };
  }
  
  render() {
   const {data}=this.state;
    return (
      <div >
        <Table
          columns={this.columns}
          pagination={false}
          size='small'
          rowKey={record => record.name}
        />
      </div>
    );
  }
}

class EdiCell extends Component {
  state = {
    value: this.props.value,
    editable: false,
  }
  handleChange = (e) => {
    console.log('EditableCell>>',e.target.value)
    const value = e.target.value;
    this.setState({ value });
  }
  check = () => {
    this.setState({ editable: false });
    const {changeState} = this.props;
    if (this.props.onChange) {
      this.props.onChange(this.state.value);
    }
    console.log('EditableCell>state>',this.state)
    // changeState({
    //   'strategyName':this.state.value
    // })
  }
  edit = () => {
    this.setState({ editable: true });
  }
  render() {
    const { value, editable } = this.state;
    return (
      <div className="editable-cell">
        {
          editable ?
            <div className="editable-cell-input-wrapper">
              <Input
                value={value}
                onChange={this.handleChange}
                onPressEnter={this.check}
                style={{width : 80}}
              />
              <Icon
                type="check"
                className="editable-cell-icon-check"
                onClick={this.check}
              />
            </div>
            :
            <div className="editable-cell-text-wrapper">
              {value || ' '}
              <Icon
                type="edit"
                className="editable-cell-icon"
                onClick={this.edit}
              />
            </div>
        }
      </div>
    );
  }
}

//资产权重约束条件：
@connect( mapStateToProps,null)
class AssetWeightTable extends Component{
  constructor(props) {
    super(props);
    this.columns = [
    {
      title: '资产名称',
      dataIndex: 'assetName',
      key: 'assetName',
    },{
      title: '资产',
      dataIndex: 'productName',
      key: 'productName',
    }, {
      title: '代码',
      dataIndex: 'productCode',
      key: 'productCode',
    }, {
      title: '权重上限',
      dataIndex: 'UpperOfWeight',
      key: 'UpperOfWeight',
      render: (text, record) => (
        <UPwEditableCell
          value={text}
          onChange={this.onCellChange(record.key, 'UpperOfWeight')}
        />
      ),
    },{
      title: '权重下限',
      dataIndex: 'LowerOfWeight',
      key: 'LowerOfWeight',
      render: (text, record) => (
        <LOwEditableCell
          value={text}
          onChange={this.onCellChange(record.key, 'LowerOfWeight')}
        />
      ),
    }];
    
    const dataAssets = props.CSassets;
    dataAssets.map((i)=>{
      i.UpperOfWeight = 0;
      i.LowerOfWeight = 100;
    })
    const dataLength = dataAssets.length;
    console.log('AssetWeightTable>>',props,dataAssets)
    
    this.state = {
      dataSource: dataAssets,
      count: dataLength,
    };
    
  };
  componentWillReceiveProps=(nextProps)=> {
    const dataAssets = nextProps.CSassets;
    dataAssets.map((i)=>{
      i.UpperOfWeight = 0;
      i.LowerOfWeight = 100;
    })
    const dataLength = dataAssets.length;
    console.log('AssetWeightTable>>',nextProps,dataAssets)
    
    this.state = {
      dataSource: dataAssets,
      count: dataLength,
    };
  }
  onCellChange = (key, dataIndex) => {
    return (value) => {
      const dataSource = [...this.state.dataSource];
      const target = dataSource.find(item => item.key === key);
      if (target) {
        target[dataIndex] = value;
        this.setState({ dataSource });
      }
    };
  }
  render() {
    const { dataSource } = this.state;
    return (
      <div >
        <Table
          columns={this.columns}
          pagination={false}
          dataSource={dataSource}
          size='small'
          rowKey={record => record.productCode}
        />
      </div>
    );
  }
}



//权重上限单元格 修改
class UPwEditableCell extends Component {
  state = {
    value: this.props.value,
    editable: false,
  }
  handleChange = (e) => {
    console.log('UPwEditableCell>>',e.target.value)
    const value = e.target.value;
    this.setState({ value });
  }
  check = () => {
    this.setState({ editable: false });
    // const {changeState} = this.props;
    if (this.props.onChange) {
      this.props.onChange(this.state.value);
    }
    console.log('UPwEditableCell>state>',this.state)
    // changeState({
    //   'strategyName':this.state.value
    // })
  }
  edit = () => {
    this.setState({ editable: true });
  }
  render() {
    const { value, editable } = this.state;
    return (
      <div className="editable-cell">
        {
          editable ?
            <div className="editable-cell-input-wrapper">
              <Input
                type="Number"
                value={value}
                onChange={this.handleChange}
                onPressEnter={this.check}
                style={{width : 80}}
              />
              <Icon
                type="check"
                className="editable-cell-icon-check"
                onClick={this.check}
              />
            </div>
            :
            <div className="editable-cell-text-wrapper">
              {value }
              <Icon
                type="edit"
                className="editable-cell-icon"
                onClick={this.edit}
              />
            </div>
        }
      </div>
    );
  }
}
//权重下限单元格 修改
class LOwEditableCell extends Component {
  state = {
    value: this.props.value,
    editable: false,
  }
  handleChange = (e) => {
    console.log('LOwEditableCell>>',e.target.value,e)
    const value = e.target.value;
    this.setState({ value });
  }
  check = () => {
    this.setState({ editable: false });
    // const {changeState} = this.props;
    if (this.props.onChange) {
      this.props.onChange(this.state.value);
    }
    console.log('LOwEditableCell>state>',this.state)
    // changeState({
    //   'strategyName':this.state.value
    // })
  }
  edit = () => {
    this.setState({ editable: true });
  }
  render() {
    const { value, editable } = this.state;
    return (
      <div className="editable-cell">
        {
          editable ?
            <div className="editable-cell-input-wrapper">
              <Input 
                type="Number"
                value={value}
                onChange={this.handleChange}
                onPressEnter={this.check}
                style={{width : 80}}
              />
              <Icon
                type="check"
                className="editable-cell-icon-check"
                onClick={this.check}
              />
            </div>
            :
            <div className="editable-cell-text-wrapper">
              {value || ' '}
              <Icon
                type="edit"
                className="editable-cell-icon"
                onClick={this.edit}
              />
            </div>
        }
      </div>
    );
  }
}
export {
	AssetsIncomeTable,
  AssetWeightTable,
  AssetsRatioTable 
}